<template>
	<view class="topicNav-container">
		<swiperTabHead ref="swiperTabHeadRef" :tabBars="tabBars" v-model:tabBarsIndex="tabBarsIndex" />

		<swiper class="swiper-box" :style="{height:swiperHeight+'px',}" :current="tabBarsIndex" @change="tabChange">
			<swiper-item class="swiper-item" v-for="(item,index) of newList" :key="index">
				<scroll-view class="scroll-v list" :scroll-y="true" @scrolltolower="loadingScroll(index)">
					<template v-if="item.list.length>0">
						<!-- 话题列表 -->
						<topicList v-for="(item2,index1) in item.list" :key="index1" :item="item2" />
						<!-- 上拉加载 -->
					</template>
					<template v-else>
						<noThing />
					</template>
				</scroll-view>
			</swiper-item>

		</swiper>


	</view>
</template>

<script setup>
	import topicList from '../../component/common/news/topic-list.vue';
	import swiperTabHead from '../../component/index/swiper-tab-head.vue';
	import loadMore from '../../component/common/load-more.vue';
	import noThing from '../../component/common/no-thing/no-thing.vue'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getTopicApi,
		getTopicClass
	} from '../../api/topicApi.js'

	const tabBars = ref();

	const tabBarsIndex = ref(0);

	const newList = ref([])

	// 切换tab
	const swiperTabHeadRef = ref()
	const swiperHeight = ref(500)

	// 切换tab
	function tabChange(e) {
		tabBarsIndex.value = e.detail.current;
		swiperTabHeadRef.value.switchTabbar(null, tabBarsIndex.value)
		getTopicList()
	}

	// 上拉加载
	function loadingScroll(index) {
		// 判断如果加载状态不等于加载更多
		if (newList[index].loadingText != "上拉加载更多") return;
		newList[index].loadingText = "加载中...";
		setTimeout(() => {
			let obj = {
				titlepic: "../../static/new.jpg",
				title: "淘宝记录簿",
				desc: "120斤到85斤 我的反转人生",
				totalnum: 50,
				todaynum: 10,
			};

			newList[index].list.push(obj);
			newList[index].loadingText = "上拉加载更多";
		}, 1000)
		// newList[index].loadingText="没有更多数据了...";
	}

	// dom挂载后执行
	onLoad(() => {
		uni.getSystemInfo({
			success: (res) => {
				let height = res.windowHeight - uni.upx2px(80);
				swiperHeight.value = height;
			}
		})
		getTopicClass().then(res => {
			tabBars.value = res;
			for (let i = 0; i < res.length; i++) {
				newList.value.push({
					loadingText: "上拉加载更多",
					list: [],
					page: 1,
					firstload: false
				})
			}
		}).finally(()=>{
			getTopicList()
		})
	})

	// 获取话题列表
	function getTopicList(isloading) {
		let item = newList.value[tabBarsIndex.value];
		if (isloading) {
			item.page++;
			getTopicApi(item.page, tabBars.value[tabBarsIndex.value].id).then(res => {
				item.list.push(...res)
				if (res.length == 0) {
					item.loadingText = "没有更多数据了...";
				} else {
					item.loadingText = "上拉加载更多";
				}
			})
		} else {
			if (!item.firstload) {
				getTopicApi(item.page, tabBars.value[tabBarsIndex.value].id).then(res => {
					item.list.push(...res)
					item.firstload = true;
					console.log(res);
				})
			}

		}

	}

</script>

<style lang="scss" scoped>
	.scroll-v {
		height: 100%;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
		width: 100%;
	}
</style>